import React from "react";
import { BsReply, BsThreeDotsVertical } from "react-icons/bs";
import { IoMdClose } from "react-icons/io";

interface MessageMenuProps {
  menuRef: React.RefObject<HTMLDivElement>;
  style: React.CSSProperties;
  onReply: () => void;
  onForward: () => void;
  onDelete: (e: React.MouseEvent) => void;
}

const MessageOpMenu: React.FC<MessageMenuProps> = ({
  menuRef,
  style,
  onReply,
  onForward,
  onDelete,
}) => (
  <div
    ref={menuRef}
    className="absolute bg-white shadow-lg rounded-lg p-1 z-50"
    style={style}
  >
    <button
      className="flex items-center w-full px-3 py-2 hover:bg-gray-100 rounded-md"
      onClick={onReply}
    >
      <BsReply className="mr-2" />
      <span>回复</span>
    </button>
    <button
      className="flex items-center w-full px-3 py-2 hover:bg-gray-100 rounded-md"
      onClick={onForward}
    >
      <BsThreeDotsVertical className="mr-2" />
      <span>转发</span>
    </button>
    <button
      className="flex items-center w-full px-3 py-2 hover:bg-gray-100 rounded-md"
      onClick={onDelete}
    >
      <IoMdClose className="mr-2 text-red-500" />
      <span className="text-red-500">删除</span>
    </button>
  </div>
);

export default MessageOpMenu;
